<template>
  <el-dialog
    v-model="visible"
    class="dispatch-list-root"
    title="换单"
    width="1000px"
  >
    <el-table
      :data="state.dispatchList"
      :default-expand-all="true"
      style="width: 100%"
      @row-dblclick="rowDoubleClick"
    >
      <el-table-column v-if="state.equipData.useMold" type="expand">
        <template #default="{ row }">
          <div
            style="
              display: flex;
              padding: 3px;
              overflow-x: scroll;
              overflow-y: hidden;
              background-color: #f9f9f9;
            "
          >
            <div
              v-for="rItem in row.dispatches"
              :key="rItem.pkDispatch"
              style="
                flex-shrink: 0;
                width: 200px;
                margin-right: 3px;
                background-color: #c6e2ff;
                border-radius: 3px;
              "
            >
              <div
                style="
                  padding: 0 6px;
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 24px;
                  color: #333;
                  background-color: #f0f1f2;
                  border-top-left-radius: 3px;
                  border-top-right-radius: 3px;
                "
              >
                {{ rItem.dispatchCode }}
              </div>
              <div
                style="
                  padding: 0 6px;
                  font-size: 12px;
                  line-height: 20px;
                  color: #666;
                "
              >
                {{ rItem.invcode }}
              </div>
              <div
                style="
                  padding: 0 6px;
                  margin-bottom: 6px;
                  font-size: 14px;
                  font-weight: 700;
                  line-height: 20px;
                  color: #333;
                "
              >
                {{ rItem.invname }}
              </div>
              <div
                style="
                  display: flex;
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 18px;
                  color: #666;
                  text-align: center;
                "
              >
                <div style="flex: 1">
                  <div>工单数</div>
                  <div
                    style="font-size: 16px; font-weight: 900; line-height: 28px"
                  >
                    {{ rItem.dispatchQty }}
                  </div>
                </div>
                <div style="flex: 1">
                  <div>报工数</div>
                  <div
                    style="font-size: 16px; font-weight: 900; line-height: 28px"
                  >
                    {{ rItem.reportQty }}
                  </div>
                </div>
                <div style="flex: 1">
                  <div>入库数</div>
                  <div
                    style="font-size: 16px; font-weight: 900; line-height: 28px"
                  >
                    {{ rItem.inQty }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80px">
        <template #default="{ row }">
          <el-button text type="primary" @click="setDispatchCurrent(row)">
            置顶
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="班次" min-width="140px">
        <template #default="{ row }">
          <div>
            <div style="font-size: 12px; color: #666">
              {{ row.banciDate }}
            </div>
            <div style="font-size: 14px; font-weight: 700; color: #333">
              {{ row.banciName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <template v-if="state.equipData.useMold">
        <el-table-column label="模具" min-width="160px">
          <template #default="{ row }">
            <div>
              <div style="font-size: 12px; color: #666">
                {{ row.moldCode }}
              </div>
              <div style="font-size: 14px; font-weight: 700; color: #333">
                {{ row.moldName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="模具型号" prop="moldSpec" width="120px" />
      </template>
      <template v-else>
        <el-table-column label="产品" min-width="160px">
          <template #default="{ row }">
            <div>
              <div style="font-size: 12px; color: #666">
                {{ row.invcode }}
              </div>
              <div style="font-size: 14px; font-weight: 700; color: #333">
                {{ row.invname }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品型号" prop="invspec" width="120px" />
      </template>
      <el-table-column label="开工信息" min-width="140px">
        <template #default="{ row }">
          <div>
            <div style="font-size: 14px; color: #333">
              {{ row.createUser }}
            </div>
            <div style="font-size: 12px; font-weight: 700; color: #666">
              {{ row.createTime }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup>
  import {
    setDispatchCurrentApi,
    getDispatchMoldEquApi,
    getDispatchEquApi,
  } from '@/api/mes/dispatch_api.ts'
  const visible = ref(false)
  const $baseLoading = inject('$baseLoading'),
    $baseMessage = inject('$baseMessage')
  const state = reactive({
    equipData: null,
    dispatchList: [],
  })
  const setDispatchCurrent = async (rowData) => {
    const load = $baseLoading()
    const params = {
      pkEqlist: rowData.pkEqlist,
      pkDispatchSeq: rowData.pkDispatchSeq,
    }
    try {
      const { msg } = await setDispatchCurrentApi(params)
      $baseMessage(msg ? msg : '操作成功', 'success')
      _emits('setDispatchCurrentCallback')
      visible.value = false
    } finally {
      load.close()
    }
  }

  const getDispatchEqu = async () => {
    const { data } = await getDispatchEquApi({
      pkEqlist: state.equipData?.pkEqlist || '',
    })
    state.dispatchList = data
  }

  const getDispatchMoldEqu = async () => {
    const { data } = await getDispatchMoldEquApi({
      pkEqlist: state.equipData?.pkEqlist || '',
    })
    state.dispatchList = data
  }
  const rowDoubleClick = () => {}
  const handleOpen = (equipData) => {
    visible.value = true
    state.equipData = equipData
    if (state.equipData.useMold) {
      getDispatchMoldEqu()
    } else {
      getDispatchEqu()
    }
  }
  defineExpose({ handleOpen })
  const _emits = defineEmits(['setDispatchCurrentCallback'])
</script>
<style lang="scss" scoped>
  // .dispatch-list-root {
  :deep(.el-table__expanded-cell) {
    padding: 2px 0 2px 50px;
  }
  :deep(.cell) {
    padding: 0 2px;
  }
</style>
